<!doctype html>
<html lang="en">
<head>
    <title>CompositeChart - Donut Pie</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/raphael-min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijbarchart.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijpiechart.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijlinechart.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijcompositechart.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijcompositechart").wijcompositechart({
                axis: {
                    y: {
                        gridMajor: {
                            visible: false
                        },
                        textVisible: false
                    },
                    x: {
                        visible: false,
                        textVisible: false
                    }
                },
                legend: {
                    visible: true
                },
                showChartLabels: true,
                chartLabelStyle: { fill: "#fff" },
                stacked: false,
                hint: {
                    content: function () {
                        return this.label + ' ' + this.y + '';
                    }
                },
                header: {
                    text: "Browsers"
                },
                seriesList: [{
                    type: "pie",
                    legendEntry: true,
                    center: { x: 400, y: 250 },
                    radius: 200,
                    data: [{
                        label: "Chrome",
                        legendEntry: true,
                        data: 38,
                        offset: 0
                    }, {
                        label: "Firefox",
                        legendEntry: true,
                        data: 36,
                        offset: 0
                    }, {
                        label: "IE",
                        legendEntry: true,
                        data: 13,
                        offset: 0
                    }, {
                        label: "Safari",
                        legendEntry: true,
                        data: 8,
                        offset: 0
                    }, {
                        label: "Other",
                        legendEntry: true,
                        data: 5,
                        offset: 0
                    }]
                }, {
                    type: "pie",
                    legendEntry: true,
                    center: { x: 400, y: 250 },
                    radius: 100,
                    data: [{
                        label: "15", //Chrome
                        legendEntry: false,
                        data: 26,
                        offset: 0
                    }, {
                        label: "14", //Chrome
                        legendEntry: false,
                        data: 8,
                        offset: 0
                    }, {
                        label: "", //Chrome
                        legendEntry: false,
                        data: 4,
                        offset: 0
                    }, {
                        label: "7", //Firefox
                        legendEntry: false,
                        data: 20,
                        offset: 0
                    }, {
                        label: "8", //Firefox
                        legendEntry: false,
                        data: 10,
                        offset: 0
                    }, {
                        label: "", //Firefox
                        legendEntry: false,
                        data: 6,
                        offset: 0
                    }, {
                        label: "9", //IE
                        legendEntry: false,
                        data: 6,
                        offset: 0
                    }, {
                        label: "8", //IE
                        legendEntry: false,
                        data: 5,
                        offset: 0
                    }, {
                        label: "", //IE
                        legendEntry: false,
                        data: 2,
                        offset: 0
                    }, {
                        label: "5", //Safari
                        legendEntry: false,
                        data: 5,
                        offset: 0
                    }, {
                        label: "", //Safari
                        legendEntry: false,
                        data: 3,
                        offset: 0
                    }, {
                        label: "",
                        legendEntry: false,
                        data: 5,
                        offset: 0
                    }]
                }],
                seriesStyles: [{
                    fill: "180-#00cc00-#28aa28", stroke: "#28aa28", "stroke-width": 1.5, opacity: 1
                }, {
                    fill: "180-#ff6600-#cb6928", stroke: "#cb6928", "stroke-width": 1.5, opacity: 1
                }, {
                    fill: "180-#0099cc-#2889aa", stroke: "#2889aa", "stroke-width": 1.5, opacity: 1
                }, {
                    fill: "180-#2200cc-#3e28aa", stroke: "#3e28aa", "stroke-width": 1.5, opacity: 1
                }, {
                    fill: "180-#cccccc-#dddddd", stroke: "#dddddd", "stroke-width": 1.5, opacity: 1
                }, {
                    fill: "#000", stroke: "none", opacity: 0.6
                }, {
                    fill: "#000", stroke: "none", opacity: 0.4
                }, {
                    fill: "#000", stroke: "none", opacity: 0.2
                }, {
                    fill: "#000", stroke: "none", opacity: 0.6
                }, {
                    fill: "#000", stroke: "none", opacity: 0.4
                }, {
                    fill: "#000", stroke: "none", opacity: 0.2
                }, {
                    fill: "#000", stroke: "none", opacity: 0.6
                }, {
                    fill: "#000", stroke: "none", opacity: 0.4
                }, {
                    fill: "#000", stroke: "none", opacity: 0.2
                }, {
                    fill: "#000", stroke: "none", opacity: 0.6
                }, {
                    fill: "#000", stroke: "none", opacity: 0.4
                }, {
                    fill: "#000", stroke: "none", opacity: 0
                }],
                seriesHoverStyles: [{
                    fill: "180-#00cc00-#28aa28", stroke: "#28aa28", "stroke-width": 2, opacity: 1
                }, {
                    fill: "180-#ff6600-#cb6928", stroke: "#cb6928", "stroke-width": 2, opacity: 1
                }, {
                    fill: "180-#0099cc-#2889aa", stroke: "#2889aa", "stroke-width": 2, opacity: 1
                }, {
                    fill: "180-#2200cc-#3e28aa", stroke: "#3e28aa", "stroke-width": 2, opacity: 1
                }, {
                    fill: "180-#cccccc-#dddddd", stroke: "#dddddd", "stroke-width": 2, opacity: 1
                }, {
                    fill: "#000", stroke: "none", opacity: 0.6
                }, {
                    fill: "#000", stroke: "none", opacity: 0.4
                }, {
                    fill: "#000", stroke: "none", opacity: 0.2
                }, {
                    fill: "#000", stroke: "none", opacity: 0.6
                }, {
                    fill: "#000", stroke: "none", opacity: 0.4
                }, {
                    fill: "#000", stroke: "none", opacity: 0.2
                }, {
                    fill: "#000", stroke: "none", opacity: 0.6
                }, {
                    fill: "#000", stroke: "none", opacity: 0.4
                }, {
                    fill: "#000", stroke: "none", opacity: 0.2
                }, {
                    fill: "#000", stroke: "none", opacity: 0.6
                }, {
                    fill: "#000", stroke: "none", opacity: 0.4
                }, {
                    fill: "#000", stroke: "none", opacity: 0
                }]
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Donut Pie</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="wijcompositechart" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px;
                height: 475px">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                The Wijmo Composite Chart widget (wijcompositechart) allows you to draw multiple
                types of charts in one canvas simultaneously. This chart uses two pie charts to
                demonstrate browser usage. The inner pie shows version specific information while
                the outer pie shows just browsers.
            </p>
        </div>
    </div>
</body>
</html>
